<template>
    <div class="nav">
        <div class="nav__item" v-for="item in navList" :key="item.text">
            <img :src="item.imgSrc" alt="jpg" class="nav__item__img">
            <span class="nav__item__text">{{item.text}}</span>
        </div>
    </div>
    <div class="grayLine"></div>
</template>

<script>
export default {
  name: 'Nav',
  setup () {
    const navList = [{
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/超市.png',
      text: '超市便利'
    },
    {
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/菜市场.png',
      text: '菜市场'
    },
    {
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/水果店.png',
      text: '水果店'
    },
    {
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/鲜花.png',
      text: '鲜花绿植'
    },
    {
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/医药健康.png',
      text: '医药健康'
    },
    {
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/家居.png',
      text: '家居时尚'
    },
    {
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/蛋糕.png',
      text: '烘焙蛋糕'
    },
    {
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/签到.png',
      text: '签到'
    },
    {
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/大牌免运.png',
      text: '大牌免运'
    },
    {
      imgSrc: 'http://www.dell-lee.com/imgs/vue3/红包.png',
      text: '红包套餐'
    }]

    return { navList }
  }
}
</script>

<style lang="scss" scoped>
.nav {
    margin-top: .16rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    &__item {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: .16rem;
        &__img {
            width: .4rem;
            height: .4rem;
            margin-bottom: .06rem;
        }
    }
}
.grayLine {
    margin:0 -.18rem .16rem -.18rem;
    height: .1rem;
    background: #f1f1f1;
}
</style>
